<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			td,
			th {
				border: 1px solid black;
				text-align: center;
				padding: 0px 10px;
			}
			
			table {
				/* border-spacing: 0px; */
				border-collapse: collapse;
				margin: 0px auto;
				width: 800px;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			
		</div>
	</body>
	<script type="text/javascript">
		var arr = [
			
			{ name: "张三",   age: 20, sex: "男" },
            { name: "李四",   age: 22, sex: "女" }, 
            { name: "王五",   age: 21, sex: "男" },
            { name: "王小六", age: 23, sex: "男" },
			{ name: "张三",   age: 20, sex: "男" },
			{ name: "李四",   age: 22, sex: "女" }, 
			{ name: "王五",   age: 21, sex: "男" },
			{ name: "王小六", age: 23, sex: "男" },
			{ name: "张三",   age: 20, sex: "男" },
			{ name: "李四",   age: 22, sex: "女" }, 
			{ name: "王五",   age: 21, sex: "男" },
			{ name: "王小六", age: 23, sex: "男" },
			{ name: "张三",   age: 20, sex: "男" },
			{ name: "李四",   age: 22, sex: "女" }, 
			{ name: "王五",   age: 21, sex: "男" },
			{ name: "王小六", age: 23, sex: "男" }
			
            ];
		var contanerEle = document.getElementsByClassName("div1")[0];
		var htmlstr = `<table><tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>`;
			var count = 0;
		for(var i=0;i<arr.length;i++){
		    // console.log(arr[i])  //   { name: "张三", age: 20, sex: "男" }
			count++;
			if(count%2==0){
				 htmlstr += `<tr style='background:red'><td>${arr[i].name}</td><td> ${arr[i].age}</td> <td>${arr[i].sex}</td></tr>`;
			}else{
				 htmlstr += `<tr style='background:skyblue'><td>${arr[i].name}</td><td> ${arr[i].age}</td> <td>${arr[i].sex}</td></tr>`;
			}
		   
		}
		
		htmlstr += "</table>";
		contanerEle.innerHTML = htmlstr;
	</script>
</html>
